<template>
	<view class="dynamic">
		<editor id="editor" class="ql-container" placeholder="快来写点什么吧!" @ready="onEditorReady" @focus="onEditorFocus"
			@input="onEditorInput"></editor>
		<view style="margin-top: 30rpx;">
			<uni-file-picker v-model="fileList" :limit="9" :autoUpload="false" mode="grid" @select="select"
				@progress="progress" @success="success" @fail="fail"></uni-file-picker>
		</view>
		<view class="other">
			<view class="other__item">
				<view class="other__item-text">
					<text>位置</text>
				</view>
				<view class="other__item-aside">
					<uni-data-checkbox v-model="site" :localdata="siteData"></uni-data-checkbox>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onNavigationBarButtonTap,
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive,
		computed,
		watchEffect,
	} from 'vue';
	import {
		useUserStore,
	} from '@/stores/user';
	import {
		useContactsStore,
	} from '@/stores/contacts';
	import {
		useDynamicStore,
	} from '@/stores/dynamic';
	import {
		storeToRefs,
	} from 'pinia';
	import {
		throttle,
	} from '@/utils/index'

	let pages = getCurrentPages();
	let page = pages[pages.length - 1];
	let currentWebview = page.$getAppWebview();

	const dynamic = useDynamicStore();

	let fileList = ref([]);
	let site = ref(1);
	let siteData = ref([{
		text: '空间',
		value: 1,
	}, {
		text: '广场',
		value: 2,
	}]);
	let editorCtx = ref(null);
	let msg = reactive({
		text: '',
		html: '',
		delta: null,
	});
	let isSend = ref(false);

	const onEditorReady = (e) => {
		uni.createSelectorQuery().select('#editor').context((res) => {
			editorCtx.value = res.context;
		}).exec()
	}

	const onEditorFocus = () => {}

	const onEditorInput = throttle((e) => {
		msg.text = e.detail.text;
		msg.html = e.detail.html;
		msg.delta = e.detail.delta;
	}, 500);

	// 获取上传状态
	const select = (e) => {
		uni.showLoading({
			title: "图片上传中"
		});

		const tempFilePaths = e.tempFilePaths;
		for (let i in tempFilePaths) { //多文件
			uni.uploadFile({
				url: 'https://jyhtop.com/upload/uploadFile', //上传接口
				filePath: tempFilePaths[i],
				name: 'file',
				success: (uploadFileRes) => {
					uni.hideLoading();
					let data = null;
					if (typeof(uploadFileRes.data) == 'string') {
						data = JSON.parse(uploadFileRes.data);
					} else {
						data = uploadFileRes.data;
					}

					if (data.code == 1) {
						fileList.value.push(data.data.url);
					} else {
						uni.showToast(data.message);
					}
				},
				fail: () => {
					uni.hideLoading();
					uni.showToast("图片上传失败，请联系开发！")
				},
				complete: function() {
					uni.hideLoading();
				}
			});
		}
	}
	// 获取上传进度
	const progress = (e) => {
		console.log('上传进度：', e)
	}
	// 上传成功
	const success = (e) => {
		console.log('上传成功')
	}
	// 上传失败
	const fail = (e) => {
		console.log('上传失败：', e)
	}

	onLoad(() => {

	});

	onNavigationBarButtonTap(throttle((e) => {
		if (e.name == 'send') {
			if (isSend.value) {
				uni.showLoading({
					title: '发布中',
					mask: true,
				});
				dynamic.addDynamic({
					type: site.value,
					content: msg.text,
					fileList: JSON.stringify(fileList.value.map(item => 'https://jyhtop.com/' + item)),
				}).then(res => {
					switch (site.value) {
						case 1:
							uni.$emit('dynamic-tab', 'space');
							break;
						case 2:
							uni.$emit('dynamic-tab', 'square');
							break;
						default:
							break;
					}

					uni.switchTab({
						url: '/pages/dynamic/dynamic',
						success: () => {
							uni.hideLoading();
						}
					});
				})
			} else {
				uni.showToast({
					title: '发布内容不能为空',
					duration: 1500,
					position: 'top',
				});
			}
		} else {}
	}, 1500));

	watchEffect(() => {
		if (fileList.value.length > 0 || msg.text.trim()) {
			if (isSend.value) return;
			isSend.value = true;
			currentWebview.setTitleNViewButtonStyle(0, {
				"color": "#000",
			});
		} else {
			if (!isSend.value) return;
			isSend.value = false;
			currentWebview.setTitleNViewButtonStyle(0, {
				"color": "#C2C2C2",
			});
		}
	})
</script>

<style lang="scss">
	:deep(.ql-container) {
		box-sizing: border-box;
		border-radius: 10rpx;
		padding: 0 10rpx;
		font-size: 18px;
		background-color: #fff;
		height: auto;
		min-height: 40px;
		max-height: 180px;
	}

	:deep(.ql-container .ql-editor) {
		padding: 20rpx 0;
	}
</style>

<style lang="scss" scoped>
	view {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

	.dynamic {
		flex: 1;
		padding: 30rpx;
		background-color: #fff;

		.other {
			margin-top: 50rpx;

			&__item {
				height: 40px;
				flex-direction: row;
				align-items: center;
				border-top: 1rpx solid #ccc;

				&-text {}

				&-aside {
					margin-left: 30rpx;
				}
			}
		}
	}
</style>
